<template>
    <div class="pieChartBox" :id="id"></div>
</template>

<script>
    import echarts from 'echarts';

    export default {
        name: "pieChart",
        props: {
            id: {
                type: String
            },
            resArr: {
                type: Array,
                default: []
            }
        },
        watch:{
            resArr(){
                this.showChart()
            }
        },
        methods: {
            getOption() {
                let resArr = this.resArr.length == 0 ? [{name: '现金类', value: 200000}] : this.resArr;
                let nameArr = resArr.map(i => i.name)
                let color = ['#6A7EDA', '#78AEE5', '#8FDADF', '#F8DB84', '#F1AC8B', '#DE7673']
                let colorArr = resArr.map((i, key) => color[key])
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {

                        textStyle: {
                            color: "#545861",
                            fontSize: 12,
                            rich: {
                                a: {
                                    fontSize: 12,
                                    width: 50
                                },
                                b: {
                                    fontSize: 12,
                                }
                            }
                        },
                        orient: 'vertical',
                        right: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        icon: 'rect',
                        top: 20,
                        bottom: 0,
                        itemGap: 8,
                        formatter: function (name) {

                            const itemValueArr = resArr.filter(el => el.name == name)
                            const itemValueAll = resArr.reduce((total, num) => {
                                return total + Math.round(num.value);
                            }, 0)

                            return `{a|${name}}{b|${(itemValueAll==0?0:itemValueArr[0].value / itemValueAll * 100).toFixed(2)}${itemValueArr[0].value==0?'':'%'}}`

                        },
                        data: nameArr,
                    },
                    color: colorArr,
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            silent:true,
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: true,
                            label: {
                                show: false,
                                position: 'right'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            right: 200,
                            data: resArr,
                        }
                    ]
                };
                return option;
            },
            showChart() {
                let myChart = echarts.init(document.getElementById(this.id));
                myChart.setOption(this.getOption())
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
                myChart.on('click', function(param) {});
            }
        },
        mounted() {
            this.showChart()
        }
    };
</script>

<style scoped>

</style>
